<template>
    <div class="page-setting">
        <div class="crumbs">
            <router-link to="/">首页</router-link> / <span>系统设置</span> /
            <span class="active">处置设置</span>
        </div>
        <el-container :style="{ height: mainH + 'px' }" v-loading="loading">
            <el-main class="census-main">
                <el-form ref="newForm" :model="settingForm" :label-width="150 + 'px'">
                    <el-form-item label="是否开启：">
                        <el-switch
                            v-model="settingForm.state"
                            active-value="1"
                            inactive-value="2"
                        />
                    </el-form-item>
                    <el-form-item
                        label="轮询时间间隔："
                        prop="time"
                        :rules="[{ required: true, message: '请选择时间间隔', trigger: 'change' }]"
                    >
                        <el-select v-model="settingForm.time" placeholder="请选择">
                            <el-option
                                :label="item.name"
                                :value="item.id"
                                v-for="(item, index) in timeList"
                                :key="index"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" prop="state">
                        <el-button type="primary" :loading="saving" @click="saveAction"
                            >保存</el-button
                        >
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import { mapState } from "vuex"
export default {
    name: "HandleSetting",
    props: {
        winH: {
            type: Number,
            default: 500,
        },
    },
    data() {
        return {
            loading: false,
            orgId: "",
            timeList: [
                {
                    id: 5,
                    name: "5分钟",
                },
                {
                    id: 10,
                    name: "10分钟",
                },
                {
                    id: 15,
                    name: "15分钟",
                },
                {
                    id: 30,
                    name: "30分钟",
                },
            ],
            saving: false,
            settingForm: {},
        }
    },
    watch: {},
    computed: {
        mainH() {
            return this.winH - 219
        },
        ...mapState(["siteInfos"]),
        isAdmin() {
            return this.siteInfos && this.siteInfos.userType == 1
        },
    },
    methods: {
        getData(page) {
            this.loading = true
            this.$get("/systemsetup/systemsetup/frameMonitoringDetails").then(
                (res) => {
                    this.loading = false
                    const { state, time } = res.data
                    this.settingForm = { state, time: +time }
                },
                (err) => {
                    this.loading = false
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        saveAction() {
            this.$refs["newForm"].validate((valid) => {
                if (valid) {
                    this.saving = true
                    this.$post(
                        "/systemsetup/systemsetup/setFrameMonitoring",
                        this.settingForm
                    ).then(
                        (res) => {
                            this.saving = false
                            this.$message.success("保存成功")
                        },
                        (err) => {
                            this.saving = false
                            if (err.msg) {
                                this.$message.error(err.msg)
                            }
                        }
                    )
                }
            })
        },
    },
    created() {
        this.getData(1)
    },
    activated() {},
    mounted() {},
}
</script>
